<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KonvaJS Sandbox</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        margin: 0;
        width: 100vw;
        height: 100vh;
      }
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
    <script>
      // TouchEmulator();
    </script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
    <!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
    <!-- <script src="./hammer.js"></script> -->
    <!-- <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script> -->
  </head>

  <body>
    <div id="container"></div>
    <textarea class="test" id="text">Hello</textarea>

    <script type="module">
      import Konva from '../src/index.ts';

      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var canvas = document.createElement('canvas');
      // use external library to parse and draw gif animation
      function onDrawFrame(ctx, frame) {
        // update canvas size
        canvas.width = frame.width;
        canvas.height = frame.height;
        // update canvas that we are using for Konva.Image
        ctx.drawImage(frame.buffer, 0, 0);
        // redraw the layer
        layer.draw();
      }

      gifler('https://konvajs.org/assets/yoda.gif').frames(canvas, onDrawFrame);

      function testKonvaImage() {
        setInterval(() => {
          const image = new Konva.Image({
            image: canvas,
            x: Math.random() * width,
            y: Math.random() * height,
          });
          layer.add(image);

          setTimeout(() => {
            image.image(canvas);
            image.destroy();
          }, 500);
        }, 10);
      }

      testKonvaImage();
    </script>
  </body>
</html>
